<template>
    <a-modal
      :title="`材料补正记录 - ${material_name}`"
      :visible="visible"
      @cancel="visible = false"
      :footer="null"
      width="90%"
    >
      <a-row class="container" v-if="materialAppendList.length">
        <a-col span="10" class="container_left">
          <a-timeline>
            <a-timeline-item v-for="(item, index) in materialAppendList" :key="index">
              第{{ index + 1 }}次补正（{{ item.opinion }}）<span style="margin-left: 20px">{{ item.createtime }}</span>
              <div v-for="att in item.append_attachList" :key="att.id" class="file_box">
                <a-tag color="#40a9ff">新增</a-tag><a-icon type="paper-clip" /><a
                  @click="viewFile(att.id, att.url)"
                  :class="{ checked: att.id == checkFileId }"
                  >{{ att.name }}</a
                >
              </div>
              <div v-for="att in item.remove_attachList" :key="att.id" class="file_box">
                <a-tag color="#ff6464">移除</a-tag><a-icon type="paper-clip" /><a
                  @click="viewFile(att.id, att.url)"
                  style="color: #ff6464"
                  :class="{ checked: att.id == checkFileId }"
                  >{{ att.name }}</a
                >
              </div>
              <div v-for="att in item.annotate_attachList" :key="att.id" class="file_box">
                <a-tag color="#648dff">批注</a-tag><a-icon type="paper-clip" /><a
                  @click="viewFile(att.id, att.url)"
                  style="color: #648dff"
                  :class="{ checked: att.id == checkFileId }"
                  >{{ att.name }}</a
                >
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-col>
        <a-col span="14" class="container_right">
          <iframe width="100%" height="100%" :src="fileurl + '#view=FitH,top'"></iframe>
        </a-col>
      </a-row>
      <a-empty v-else description="该材料暂无补正记录" />
    </a-modal>
  </template>
   
  <script>
//   import { getMaterialAppends } from '@/api/apply/apl_attach_append'
  export default {
    props: {
      applyid: String
    },
    data() {
      return {
        visible: false,
        material_name: '',
        materialAppendList: [],
        fileurl: '',
        checkFileId: ''
      }
    },
    methods: {
      async open(material_name, material_entity, material_id) {
        this.material_name = material_name
        this.materialAppendList = []
        this.checkFileId = ''
        this.fileurl = ''
        this.visible = true
        let res = await getMaterialAppends({ applyid: this.applyid, material_entity, material_id })
        console.log(res)
        if (res.data && res.data.length) {
          this.materialAppendList = res.data
          if (this.materialAppendList[0].append_attachList && this.materialAppendList[0].append_attachList.length) {
            this.checkFileId = this.materialAppendList[0].append_attachList[0].id
            this.fileurl = this.materialAppendList[0].append_attachList[0].url
          } else if (
            this.materialAppendList[0].remove_attachList &&
            this.materialAppendList[0].remove_attachList.length
          ) {
            this.checkFileId = this.materialAppendList[0].remove_attachList[0].id
            this.fileurl = this.materialAppendList[0].remove_attachList[0].url
          }
        }
      },
      viewFile(id, url) {
        this.checkFileId = id
        this.fileurl = url
      }
    }
  }
  </script>
   
  <style scoped>
  .container {
    height: 65vh;
  }
  .container_left {
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #ccc;
    padding-top: 3px;
  }
  .container_right {
    height: 100%;
    padding-left: 15px;
  }
  .checked {
    border: 1px solid;
    border-radius: 4px;
    padding: 2px;
  }
  .file_box {
    margin-top: 5px;
  }
  </style>